<template>
	<view class="container">
		<view class="top-info u-flex u-flex-column u-flex-between">
			<view class="u-flex u-flex-y-center m-t40">
				<image class="avatar m-r20 m-l30" src="/static/images/login/logo.png" mode=""></image>
				<view class="right-userInfo">
					<view class="name">{{'段红一'}}</view>
					<view class="account-info">绑定账号:{{'21739123'}}</view>
				</view>
			</view>
			<view class="detail-box">
				<image class="money-bg" src="../../static/images/my/my-mask.png" mode=""></image>
				<view class="det-con u-flex u-flex-between u-flex-y-center" @click="openUrl('/pages/my/balance')">
					<view class="u-flex u-flex-y-center">
						<image class="icon-price m-r10" src="../../static/images/my/icon-money.png" mode=""></image>
						<text>余额: {{$u.priceFormat('32137',2)}}</text>
					</view>
					<view class="det-btn">明细</view>
				</view>
			</view>
		</view>
		<view class="u-flex u-flex-between u-flex-y-center account-box" @click="openUrl('/pages/my/account')">
			<view class="u-flex u-flex-y-center">
				<image class="icon-account" src="../../static/images/my/icon-card.png" mode="widthFix"></image>
				<view class="account-lable">账号管理</view>
			</view>
			<view>
				<text>{{'2'}}<text style="color: #999;" class="cuIcon cuIcon-right"></text></text>
			</view>
		</view>
		<view class="box-cell">
			<view class="u-flex u-flex-between u-flex-y-center">
				<view class="record">接单记录</view>
				<view class="more" @click="openUrl('/pages/order/record')">查看更多 <text class="cuIcon cuIcon-right"></text>
				</view>
			</view>
			<view class="u-flex u-flex-around m-t40 m-b30">
				<view class="u-flex u-flex-column u-flex-items-center" @click="openUrl('/pages/order/record')">
					<image class="icon" src="../../static/images/my/icon-all.png" mode="widthFix"></image>
					<view class="lable">全部</view>
				</view>
				<view class="u-flex u-flex-column u-flex-items-center" @click="openUrl('/pages/order/record')">
					<image class="icon" src="../../static/images/my/icon-pedding.png" mode="widthFix"></image>
					<view class="lable">接单中</view>
				</view>
				<view class="u-flex u-flex-column u-flex-items-center" @click="openUrl('/pages/order/record')">
					<image class="icon" src="../../static/images/my/icon-resolve.png" mode="widthFix"></image>
					<view class="lable">接单完成</view>
				</view>
			</view>
			<view class="">
				<view class="box m-b20">
					<view class="u-flex u-flex-between">
						<view class="u-line-1 title">客资获取提高40%！小红书私信通，添加欢迎语，快速响应</view>
						<view :class="'status_' + status">接单中</view>
					</view>
					<view class="time">接单时间：{{$u.timeFormat(Date.now())}}</view>
				</view>
				<view class="box">
					<view class="u-flex u-flex-between">
						<view class="u-line-1 title">客资获取提高40%！小红书私信通，添加欢迎语，快速响应</view>
						<view :class="'status_' + 2">接单完成</view>
					</view>
					<view class="time">接单时间：{{$u.timeFormat(Date.now())}}</view>
				</view>
			</view>
		</view>
		<view class="m-t40 p-l24 p-r24">
			<button class="logout_btn">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 1
			};
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 130rpx;
	}

	.top-info {
		width: 100%;
		height: 405rpx;
		background: url('/static/images/my/my-bg.png') no-repeat top center;
		background-size: 100% 100%;
		color: #fff;

		.avatar {
			width: 140rpx;
			height: 140rpx;
			display: block;
			border-radius: 50%;
		}

		.detail-box {
			position: relative;
			bottom: -6rpx;

			.det-con {
				width: 80%;
				position: absolute;
				left: 50%;
				top: 60%;
				transform: translate(-50%, -50%);

				.icon-price {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.money-bg {
				width: 100%;
				height: 203rpx;
			}

			.det-btn {
				background: linear-gradient(90deg, #DCB48C 0%, #FFE0C1 100%);
				border-radius: 16rpx;
				padding: 9rpx 30rpx;
				color: #613C16;
				font-size: 26rpx;
			}
		}
	}

	.box-cell {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 24rpx;
		margin: 30rpx 30rpx 0;

		.record {
			font-size: 34rpx;
			font-weight: 600;
			color: #111;
		}

		.more {
			font-size: 26rpx;
			color: #999;
		}

		.icon {
			width: 80rpx;
			height: 80rpx;
		}

		.lable {
			font-size: 26rpx;
			color: #333;
		}

		.box {
			background-color: #F5F5F7;
			border-radius: 16rpx;
			padding: 24rpx;
		}

		.time {
			font-size: 22rpx;
			color: #999;
			margin-top: 13rpx;
		}

		.title {
			width: 75%;
			font-size: 30rpx;
			color: #111;
			font-weight: 600;
		}

		.status_1 {
			color: #3662EC;
		}

		.status_2 {
			color: #00B578;
		}
	}

	.account-box {
		padding: 24rpx;
		margin: 20rpx 30rpx 0;
		background: #fff;
		border-radius: 16rpx;
	}

	.icon-account {
		width: 56rpx;
		height: 56rpx;
	}

	.account-lable {
		font-size: 34rpx;
		font-weight: 600;
		color: #111;
		margin-left: 12rpx;
	}
	.logout_btn {
		color: #FA5151;
		font-size: 30rpx;
		font-weight: bold;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 16rpx;
		background: #fff;
		&::after {
			border: none;
		}
	}
</style>